<template>
  <div id="userMaterial">
    <div class="userMaterialContent">
      <div class="userMaterialTitle">
        <h2 class="active">我的资料 <span></span></h2>
      </div>
      <div class="userMaterialMaterial">
        <!-- <form id="publishForm" action="http://192.168.1.112:8884/cxpt/web/user/updateUser" method="post" enctype="multipart/form-dataform-data"> -->
        <ul>
          <li>
            <div class="userMaterialMaterialLeft">
              <span>头像</span>
            </div>
            <div class="userMaterialMaterialRight">
              <label for="headPhotoId">
                <img :src="headPhoto" alt="">
                <input id="headPhotoId" type="file" accept="image/*" style="display: none;" @change="onHeadPhoto($event)">
              </label>
            </div>
          </li>
          <li>
            <div class="userMaterialMaterialLeft">
              <span>昵称</span>
            </div>
            <div class="userMaterialMaterialRight">
              <input type="text" placeholder="请输入昵称" v-model="nickname">
            </div>
          </li>
          <li>
            <div class="userMaterialMaterialLeft">
              <span>性别</span>
            </div>
            <div class="userMaterialMaterialRight">
              <input id="girl" type="radio" name="sex" @click="onChange($event, 0)" :data-checked="userSex === 0">
              <span>女</span>
              <input id="boy" type="radio" name="sex" @click="onChange($event, 1)" :data-checked="userSex === 1">
              <span>男</span>
              <input id="rest" type="radio" name="sex" @click="onChange($event, 2)" :data-checked="userSex === 2">
              <span>其他</span>
            </div>
          </li>
          <li>
            <div class="userMaterialMaterialLeft">
              <span>年龄</span>
            </div>
            <div class="userMaterialMaterialRight">
              <input type="text" placeholder="请输入年龄" v-model="userAge">
            </div>
          </li>
          <li>
            <div class="userMaterialMaterialLeft">
              <span>地区</span>
            </div>
            <div class="userMaterialMaterialRight">
              <select v-model="userProvince" @change="fetchCity()">
                <option v-for="(item, index) in provinceData" :key="index">{{item.province}}</option>
              </select>
              <select v-model="userCity" @change="fetchArea()">
                <option v-for="(item, index) in cityData" :key="index">{{item.city}}</option>
              </select>
              <select v-model="userArea">
                <option v-for="(item, index) in areaData" :key="index">{{item.area}}</option>
              </select>
            </div>
          </li>
          <li>
            <div class="userMaterialMaterialLeft">
              <span>详细地址</span>
            </div>
            <div class="userMaterialMaterialRight">
              <input type="text" placeholder="请输入详细地址" v-model="userAddress">
            </div>
          </li>
          <li>
            <div class="userMaterialMaterialLeft">
              <span>手机号</span>
            </div>
            <div class="userMaterialMaterialRight">
              <input type="text" placeholder="请输入手机号" v-model="userMobile">
            </div>
          </li>
          <li>
            <div class="userMaterialMaterialLeft">
              <span>邮箱</span>
            </div>
            <div class="userMaterialMaterialRight">
              <input type="text" placeholder="请输入邮箱" v-model="userEmail">
            </div>
          </li>
          <li>
            <div class="userMaterialMaterialLeft">
              <span>简介</span>
            </div>
            <div class="userMaterialMaterialRight">
              <textarea placeholder="请输入简介" v-model="userIntroduce"></textarea>
            </div>
          </li>
          <li v-show="userInfo.userType === 1">
            <div class="userMaterialMaterialLeft">
              <span>学校</span>
            </div>
            <div class="userMaterialMaterialRight">
              <select v-model="userSchoolName">
                <option v-for="(item, index) in userSchoolList" :key="index">{{item.schoolName}}</option>
              </select>
            </div>
          </li>
          <li>
            <div>
              <span>点击上传视频</span>
              <input id="uploadFileWorksVideoId" value="上传视频" type="file" accept="video/*" name="video" @change="onUploadWorksVideoFile($event)">
            </div>
          </li>
          <li v-html="videoUrl">

          </li>
        </ul>
        <!-- </form> -->
        <div class="btnBox" style="width: 1.5rem;">
          <button class="btnDef" type="submit" @click="handUpdateUser($event)">提交</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { ChinaAddressData } from 'vux'

export default {
  name: 'userMaterial',
  data () {
    let userInfo = this.$store.state.user.userInfo
    return {
      userInfo: userInfo,
      headPhoto: this.$globalImageUrl + userInfo.avatar,
      nickname: userInfo.userName,
      userSex: userInfo.sex || 0,
      userAge: userInfo.age || 0,
      userProvince: userInfo.province,
      userCity: userInfo.city,
      userArea: userInfo.area,
      userAddress: userInfo.address,
      userMobile: userInfo.phone,
      userEmail: userInfo.email,
      userIntroduce: userInfo.introduce,
      userSchoolName: userInfo.schoolName,
      videoUrl: userInfo.videoUrl,
      userSchoolList: [],
      provinceId: 110000,
      cityId: 110100,
      provinceData: [],
      cityData: [],
      areaData: [],
      worksCoverVideoImg: '',
      uploadWorksVideoListFile: [],
    }
  },
  created () {
    this.fetchProvince(() => {
      this.fetchCity(() => {
        this.fetchArea()
      })
    })
    this.fetchSchoolList()
    this.$nextTick(() => {
      let nameArray = document.getElementsByName('sex')
      for (let i = 0; i < nameArray.length; i++) {
        nameArray[i].defaultChecked = nameArray[i].dataset.checked
      }
    })
  },
  methods: {
    // 
    onUploadWorksVideoFile (e) {
      var file = e.target.files[0]
      this.uploadWorksVideoListFile.push(file)
      // var base64 = null
      // var reader = new FileReader()
      // reader.readAsDataURL(file)
      // // onload为读取后的回调函数
      // reader.onload = (e) => {
      //   base64 = e.target.result
      //   this.uploadWorksVideoList.push(base64)
      // }
      // console.log(this.uploadWorksVideoListFile)
    },
    // 设置头像
    onHeadPhoto (e) {
      if (e.target.files[0].size === 1024 * 1024 * 2) {
        this.$vux.toast.text('请选择不大于2MB的图片')
        return
      }
      var reader = new FileReader()
      reader.readAsDataURL(e.target.files[0])
      // onload为读取后的回调函数
      reader.onload = (e) => {
        this.headPhoto = e.target.result
      }
    },
    // 设置性别
    onChange (e, index) {
      let nameArray = document.getElementsByName('sex')
      for (let i = 0; i < nameArray.length; i++) {
        nameArray[i].defaultChecked = false
      }
      this.userSex = index
      e.target.defaultChecked = true
    },
    // 提交我的资料
    handUpdateUser () {
      this.worksCoverVideoImg = this.uploadWorksVideoListFile[0]
      console.log(this.worksCoverVideoImg)
      this.$api.postUpdateUser({
        image: this.headPhoto,
        schoolName: this.userSchoolName,
        userName: this.nickname,
        sex: this.userSex,
        age: this.userAge,
        province: this.userProvince,
        city: this.userCity,
        area: this.userArea,
        address: this.userAddress,
        phone: this.userMobile,
        email: this.userEmail,
        introduce: this.userIntroduce,
        video: this.worksCoverVideoImg,
        userId: this.$store.state.user.userId,
      }).then(res => {
        if (res.code === 0) {
          this.$vux.toast.text(res.msg)
          this.fetchUserInfoById()
        }
      })
    },
    // 获取用户信息
    fetchUserInfoById () {
      this.$api.getUserInfoById({
        id: this.$store.state.user.userId
      }).then(res => {
        this.$store.commit('setUserInfo', res.data)
      })
    },
    // 获取省列表
    fetchProvince (fun) {
      this.$api.getProvince({
      }).then(res => {
        if (res.code === 0) {
          this.provinceData = res.data
          fun && fun()
        }
      })
    },
    // 获取市列表
    fetchCity (fun) {
      for (let i = 0; i < this.provinceData.length; i++) {
        if (this.userProvince === this.provinceData[i].province) {
          this.provinceId = this.provinceData[i].provinceId
        }
      }
      this.$api.getCity({
        provinceId: this.provinceId
      }).then(res => {
        if (res.code === 0) {
          this.cityData = res.data
          fun && fun()
        }
      })
    },
    // 获取区列表
    fetchArea () {
      for (let i = 0; i < this.cityData.length; i++) {
        if (this.userCity === this.cityData[i].city) {
          this.cityId = this.cityData[i].cityId
        }
      }
      this.$api.getArea({
        cityId: this.cityId
      }).then(res => {
        if (res.code === 0) {
          this.areaData = res.data
        }
      })
    },
    // 获取学校列表
    fetchSchoolList () {
      this.$api.getSchoolList({
      }).then(res => {
        if (res.code === 0) {
          this.userSchoolList = res.data
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
#userMaterial{
  .userMaterialContent{
    .userMaterialMaterial{
      padding: .2rem;
      ul{
        padding: .1rem 0;
        li{
          display: flex;
          justify-content: space-between;
          flex-wrap: nowrap;
          align-items: center;
          padding: .1rem 0;
          .userMaterialMaterialLeft{
            width: 15%;
            padding-left: .2rem;
            span{
              font-size: .14rem;
              font-weight: 500;
              color: #333;
              line-height: .24rem;
              margin-left: .2rem;
            }
          }
          .userMaterialMaterialRight{
            width: 85%;
            img{
              width: 1rem;
              height: 1rem;
              display: inline-block;
              border-radius: 500px;
            }
            input[type="text"]{
              display: inline-block;
              width: 2rem;
              border: 1px solid #ccc;
              border-radius: .05rem;
              font-size: .14rem;
              font-weight: 500;
              color: #333;
              line-height: .4rem;
              padding: 0 .1rem;
            }
            input[type="radio"]{
              width: .2rem;
              height: .2rem;
              border: 1px solid #ccc;
              border-radius: 500px;
              vertical-align: top;
              font-size: 0;
              vertical-align: middle;
            }
            input[checked]::after {
              content: '';
              display: inline-block;
              background-color: #ccc;
              width: .14rem;
              height: .14rem;
              border-radius: 500px;
              line-height: .2rem;
              margin: .02rem;
              vertical-align: top;
            }
            span{
              font-size: .16rem;
              font-weight: 500;
              color: #333;
              line-height: .4rem;
              padding: 0 .05rem;
            }
            select{
              outline: none;
              width: 2rem;
            }
            textarea {
              display: inline-block;
              width: 2rem;
              border: 1px solid #ccc;
              border-radius: .05rem;
              font-size: .14rem;
              font-weight: 500;
              color: #333;
              line-height: .4rem;
              padding: 0 .1rem;
              resize: auto;
            }
          }
        }
      }
    }
  }
}
</style>
